<template>
    <div class="wrapper">
        <!-- 主体内容 -->
        <div class="">
            <main class="content-area">
                <!-- 顶部操作栏 -->
                <div class="action-bar">
                    <div class="action-bar-left">
                        <span class="page-title">地推人员管理</span>
                    </div>
                    <div class="action-bar-right">
                        <button class="btn btn-primary" @click="openAddModal">
                            <i class="fas fa-plus" style="margin-right: 5px;"></i>添加地推人员
                        </button>
                    </div>
                </div>

                <!-- 数据统计卡片 -->
                <div class="data-cards">
                    <!-- 卡片内容保持不变 -->
                </div>

                <!-- 地推人员列表 -->
                <div class="left-panel">
                    <div class="panel-header">
                        <div class="panel-title">地推人员列表</div>
                        <div class="panel-options">
                            <div class="table-filters">
                                <select v-model="bid">
                                    <option value="">选择标签</option>
                                    <option :value="item.label_id" v-for="(item, index) in bqlist" :key="index">{{item.label_name}}</option>
                                </select>
                                <input type="text" placeholder="搜索姓名/手机号" v-model="searchQuery">
                                <select v-model="filterStatus">
                                    <option value="">所有状态</option>
                                    <option value="0">正常</option>
                                    <option value="1">禁用</option>
                                    <!-- <option value="2">待审核</option> -->
                                </select>
                                <button class="btn btn-default btn-sm" @click="serch"><i
                                        class="fas fa-search">搜索</i></button>
                            </div>
                        </div>
                    </div>
                    <el-card>
                        <table class="affiliate-table">
                            <thead>
                                <tr>
                                    <th>地推人员ID</th>
                                    <th>标签</th>
                                    <th>姓名</th>
                                    <th>联系方式</th>
                                    <th>邀请商户数</th>
                                    <th>累计佣金</th>
                                    <th>佣金比例</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(affiliate, index) in filteredAffiliates" :key="index">
                                    <td>{{ affiliate.id }}</td>
                                    <td>{{ affiliate.bid }}</td>
                                    <td>{{ affiliate.username }}</td>
                                    <td>{{ affiliate.phone }}</td>
                                    <td>{{ affiliate.invites || 0 }}</td>
                                    <td>{{ affiliate.commission || 0 }}</td>
                                    <td>{{ affiliate.yjbl }}% <button class="action-btn" @click="edityjbl(affiliate)"><i
                                                class="fas fa-edit"></i></button></td>
                                    <td><span class="status-tag" :class="statusClass[affiliate.status]">{{
                                        statusText[affiliate.status] }}</span></td>
                                    <td>
                                        <button class="action-btn" @click="geneyjblQRCode(affiliate)">二维码</button>
                                        <button class="action-btn" @click="viewDetails(affiliate.id)">编辑</button>
                                        <button class="action-btn delete"
                                            @click="deleteAffiliate(affiliate.id, index)">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="block">
                            <el-pagination background :page-size="tableFrom.limit" :current-page="tableFrom.page"
                                layout="total, prev, pager, next, jumper" :total="tableData.total"
                                @size-change="handleSizeChange" @current-change="pageChange" />
                        </div>
                    </el-card>
                </div>
            </main>
        </div>

        <!-- 添加地推人员模态框 -->
        <div class="modal" :class="{ show: isModalOpen }" @click.self="closeAddModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加地推人员</h5>
                    <button type="button" class="modal-close" @click="closeAddModal">&times;</button>
                </div>
                <div class="modal-body">
                    <Form ref="formItem" class="mt20">
                        <div class="form-group">
                            <label for="userSelect" class="form-label">选择标签</label>
                            <Select v-model="newAffiliate.bid" class="inputW" filterable>
                                <Option v-for="item in bqlist" :value="item.label_id" :key="item.label_id" :label="item.label_name">
                                    {{ item.label_name }}
                                </Option>
                            </Select>
                        </div>
                        <div class="form-group">
                            <label for="userSelect" class="form-label">选择用户</label>
                            <Select v-model="newAffiliate.uid" class="inputW" filterable>
                                <Option v-for="item in users" :value="item.uid" :key="item.uid" :label="item.nickname">
                                    {{ item.nickname }}
                                </Option>
                            </Select>
                        </div>
                        <div class="form-group">
                            <label for="affiliateName" class="form-label">姓名</label>
                            <input type="text" class="form-input" id="affiliateName" placeholder="请输入姓名"
                                v-model="newAffiliate.username">
                            <div class="form-error" v-if="errors.username">{{ errors.username }}</div>
                        </div>
                        <div class="form-group">
                            <label for="affiliatePhone" class="form-label">联系方式</label>
                            <input type="tel" class="form-input" id="affiliatePhone" placeholder="请输入手机号码"
                                v-model="newAffiliate.phone">
                            <div class="form-error" v-if="errors.phone">{{ errors.phone }}</div>
                        </div>
                        <div class="form-group">
                            <label for="commissionyjbl" class="form-label">佣金比例 (%)</label>
                            <input type="number" class="form-input" id="commissionyjbl"
                                v-model.number="newAffiliate.yjbl" min="0" step="0">
                            <div class="form-error" v-if="errors.yjbl">{{ errors.yjbl }}</div>
                        </div>
                        <div class="form-group">
                            <label for="userSelect" class="form-label">状态</label>
                            <Select v-model="newAffiliate.status" class="inputW" filterable>
                                <Option v-for="item in arrAys" :value="item.key" :key="item.key" :label="item.name">
                                    {{ item.name }}
                                </Option>
                            </Select>
                        </div>
                    </Form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" @click="closeAddModal">取消</button>
                    <button type="button" class="btn btn-primary" @click="addAffiliate">确认添加</button>
                </div>
            </div>
        </div>
        <div class="modal" :class="{ show: isModalqrOpen }" @click.self="closeQRModal">
            <img :src="qrCodeImage" alt="" style="width: 300px;height: 300px;">
        </div>
    </div>
</template>
<script>
import { userListApi, dtuser, getusererweima, insertdtuser, deletaditui, getdetails, dtlabelLstApi } from "@/api/user";
export default {
    data() {
        return {
            bqlist: [],
            isQRModalOpen: false,
            qrCodeImage: null,
            affiliates: [
            ],
            users: [],
            searchQuery: '',
            filterStatus: '',
            bid:'',
            isModalOpen: false,
            isModalqrOpen: false,
            arrAys: [
                {
                    key: 1,
                    name: '正常'
                },
                {
                    key: 2,
                    name: '封禁'
                }
            ],
            newAffiliate: {
                username: '',
                phone: '',
                yjbl: 1,
                uid: null,
                id: 0,
                status: 1,
                bid: 0
            },
            tableFrom: {
                page: 1,
                limit: 20,
            },
            tableFromLog: {
                page: 1,
                limit: 10,
            },
            errors: {},
            tableData: {
                data: [],
                total: 0,
            },
            filteredAffiliates: []
        };
    },
    computed: {
        statusClass() {
            return {
                1: 'status-danger',
                0: 'status-success',
                2: 'status-warning'
            };
        },
        statusText() {
            return {
                2: '禁用',
                1: '正常'
            };
        }
    },
    created() {
        this.getdtusers(1)
        this.getuserList();
        this.getbqlist();
    },
    methods: {
        //获取标签liST
        getbqlist() {
            dtlabelLstApi()
                .then((res) => {
                    this.bqlist = res.data.list;
                })
                .catch((res) => {
                });
        },
        // 获取二维码并显示
        geneyjblQRCode(items) {
            var uid = items.uid
            this.isModalqrOpen = true;
            getusererweima(uid)
                .then((res) => {
                    this.qrCodeImage = res.data.qrcode;
                })
                .catch((res) => {
                    this.$message.error(res.message);

                });
        },
        // 关闭二维码模态框
        closeQRModal() {
            this.isModalqrOpen = false;
        },      //查询所有地推人员
        pageChange(page) {
            this.tableFrom.page = page;
            this.getdtusers('');
        },
        handleSizeChange(val) {
            this.tableFrom.limit = val;
            this.getdtusers('');
        },
        getdtusers(num) {
            var data = {
                status: this.filterStatus,
                keywords: this.searchQuery,
                bid: this.bid,
            }
            dtuser(data)
                .then((res) => {
                    this.filteredAffiliates = res.data.list
                })
                .catch((res) => {
                    this.$message.error(res.message);

                });
        },
        serch() {
            this.getdtusers('')
        },
        //查询所有用户
        getuserList() {
            var that = this
            that.listLoading = true;

            userListApi()
                .then((res) => {
                    this.users = res.data.list;
                })
                .catch((res) => {
                    this.$message.error(res.message);
                    this.listLoading = false;
                });
        },
        openAddModal() {
            this.isModalOpen = true;
        },
        closeAddModal() {
            this.isModalOpen = false;
            this.newAffiliate = {
                username: '',
                phone: '',
                yjbl: 1,
                uid: null
            };
            this.errors = {};
        },
        addAffiliate() {

            if (!this.newAffiliate.username.trim()) {
                this.$message.error('姓名不能为空');
                return false;
            }

            if (!this.newAffiliate.phone.trim()) {
                this.$message.error('联系方式不能为空');
                return false;
            } else if (!/^1[3-9]\d{9}$/.test(this.newAffiliate.phone)) {
                this.$message.error('请输入有效的手机号码');
                return false;
            }

            if (isNaN(parseFloat(this.newAffiliate.yjbl)) || parseFloat(this.newAffiliate.yjbl) < 0) {
                this.$message.error('请输入有效的佣金比例');
                return false;
            }

            insertdtuser(this.newAffiliate)
                .then((res) => {
                    this.$message.success('操作成功');
                    this.closeAddModal();
                    this.getdtusers('')
                })
                .catch((res) => {
                    this.$message.error(res.message);
                    this.closeAddModal();
                });

        },
        edityjbl(affiliate) {
        },
        viewDetails(id) {
            this.isModalOpen = true;
            getdetails(id)
                .then((res) => {
                    this.newAffiliate = res.data
                })
                .catch((res) => {
                    this.$message.error(res.message);

                });
        },
        deleteAffiliate(id, index) {
            if (confirm(`确认删除该地推人员吗？`)) {
                deletaditui(id)
                    .then((res) => {
                        this.$message.success(res.message);
                        this.filteredAffiliates.splice(index, 1);
                        this.getdtusers('')
                    })
                    .catch((res) => {
                        this.$message.error(res.message);

                    });
            }
        }
    }
};
</script>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

body {
    background-color: #f0f2f5;
    color: #333;
    font-size: 14px;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 顶部导航栏 */
.top-navbar {
    height: 50px;
    background-color: #2d3748;
    /* 深色背景 */
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1001;
    /* 置于最顶层 */
}

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-logo {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    /* background-color: #fff; /* 临时Logo背景 */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* color: #2d3748; */
}

.navbar-logo img {
    width: 100%;
    height: 100%;
}


.navbar-menu {
    display: flex;
}

.nav-menu-item {
    padding: 0 15px;
    line-height: 50px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    position: relative;
    font-size: 14px;
}

.nav-menu-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-menu-item.active {
    color: #fff;
    background-color: #4a6cf7;
    /* 激活状态背景色 */
}

.nav-menu-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #fff;
}


.navbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.nav-icon {
    margin: 0 10px;
    font-size: 18px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.nav-icon:hover {
    color: #fff;
}

.user-info {
    margin-left: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-info span {
    margin-right: 5px;
}


/* 页面主体内容 */
.main-container {}


/* 左侧边栏 (根据图一简化，实际地推管理可能不需要这么复杂的侧边栏) */
.sidebar {
    width: 120px;
    /* 调整宽度 */
    background-color: #fff;
    /* height: calc(100vh - 50px); */
    /* 减去顶部导航高度 */
    /* position: fixed; */
    /* 改为随页面滚动 */
    /*  top: 50px; */
    left: 0;
    z-index: 10;
    border-right: 1px solid #e6e6e6;
    padding-top: 15px;
}


.sidebar-menu-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.sidebar-menu-item i {
    margin-right: 10px;
    width: 16px;
    /* 固定图标宽度 */
    text-align: center;
    color: #555;
}

.sidebar-menu-item:hover {
    background-color: #f5f7f9;
    color: #4a6cf7;
}

.sidebar-menu-item.active {
    background-color: #ecf5ff;
    border-left-color: #4a6cf7;
    color: #4a6cf7;
    font-weight: 500;
}

.sidebar-menu-item.active i {
    color: #4a6cf7;
}


/* 主内容区 */
.content-area {
    flex: 1;
    padding: 20px;
    background-color: #f0f2f5;
    /* 背景色 */
    /* margin-left: 120px; */
    /* 侧边栏宽度 */
}

/* 顶部操作栏 */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.action-bar-left .page-title {
    font-size: 18px;
    font-weight: 500;
}

.action-bar-right .btn {
    margin-left: 10px;
}


/* 数据统计卡片 */
.data-cards {
    display: grid;
    /* 使用 grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* 响应式列 */
    gap: 20px;
    /* 卡片间距 */
    margin-bottom: 20px;
}

.data-card {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-title {
    color: #666;
    font-size: 14px;
}

.card-option {
    color: #999;
    font-size: 12px;
}

.card-value {
    font-size: 30px;
    /* 调整大小 */
    font-weight: bold;
    margin: 10px 0;
}

.card-compare {
    font-size: 12px;
    color: #999;
}

.card-compare span {
    margin: 0 5px;
}

.compare-up {
    color: #f56c6c;
}

.compare-down {
    color: #67c23a;
}

/* 主要内容面板 */
.main-panel {
    display: flex;
    gap: 20px;
    /* 面板间距 */
}

.left-panel {
    flex: 3;
    /* 左侧占比较大 */
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.right-panel {
    flex: 1;
    /* 右侧占比较小 */
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.panel-title {
    font-size: 16px;
    font-weight: 500;
}

.table-actions {
    margin-bottom: 15px;
    /* 表格上方操作区域 */
    display: flex;
    justify-content: space-between;
}

.table-filters input,
.table-filters select {
    margin-right: 10px;
    padding: 6px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
}


/* 地推人员表格 */
.affiliate-table {
    width: 100%;
    border-collapse: collapse;
}

.affiliate-table th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 500;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ebeef5;
    font-size: 13px;
}

.affiliate-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ebeef5;
    font-size: 14px;
    color: #333;
}

.affiliate-table tr:last-child td {
    border-bottom: none;
}

.affiliate-table tr:hover {
    background-color: #f5f7fa;
}

.status-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
}

.status-success {
    background-color: #f0f9eb;
    color: #67c23a;
    border: 1px solid #e1f3d8;
}

.status-danger {
    background-color: #fef0f0;
    color: #f56c6c;
    border: 1px solid #fde2e2;
}

.status-warning {
    background-color: #fdf6ec;
    color: #e6a23c;
    border: 1px solid #faecd8;
}

.action-btn {
    color: #4a6cf7;
    cursor: pointer;
    margin-right: 10px;
    font-size: 13px;
    background: none;
    border: none;
    padding: 0;
}

.action-btn:hover {
    text-decoration: underline;
}

.action-btn.delete {
    color: #f56c6c;
}


/* 地推排行榜 */
.leaderboard-list {
    list-style: none;
    padding: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-rank {
    width: 30px;
    font-weight: bold;
    color: #999;
    text-align: center;
}

.leaderboard-rank.top1 {
    color: #ff4d4f;
}

.leaderboard-rank.top2 {
    color: #faad14;
}

.leaderboard-rank.top3 {
    color: #1890ff;
}

.leaderboard-name {
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-value {
    font-weight: 500;
    color: #ff4d4f;
    margin-left: 10px;
    font-size: 14px;
}


/* 通用按钮样式 */
.btn {
    padding: 8px 15px;
    /* 调整按钮大小 */
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.btn-primary {
    background-color: #4a6cf7;
    color: #fff;
    border-color: #4a6cf7;
}

.btn-primary:hover {
    background-color: #3b5bdb;
    border-color: #3b5bdb;
}

.btn-default {
    background-color: #fff;
    color: #333;
    border-color: #dcdfe6;
}

.btn-default:hover {
    color: #4a6cf7;
    border-color: #a0cfff;
    background-color: #ecf5ff;
}

/* 模态框样式 */
.modal {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明遮罩 */
    z-index: 1002;
    /* 比顶部导航更高 */
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex;
    /* 显示时使用flex布局 */
}

.modal-content {
    background-color: #fff;
    border-radius: 6px;
    width: 450px;
    /* 调整宽度 */
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    /* 防止内容溢出圆角 */
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.modal-close {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.modal-close:hover {
    color: #666;
}

.modal-body {
    padding: 20px 25px;
    /* 调整内边距 */
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}

.modal-footer .btn {
    margin-left: 10px;
}

/* 表单组样式 */
.form-group {
    margin-bottom: 18px;
    /* 调整间距 */
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 9px 12px;
    /* 调整内边距 */
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}

.form-input[type="number"] {
    width: 80px;
    /* 佣金比例输入框宽度 */
}

.form-error {
    margin-top: 5px;
    font-size: 12px;
    color: #f56c6c;
    display: none;
    /* 默认隐藏 */
}
</style>